<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%
	//项目的发布路径，例如:  /rabc
	String path = request.getContextPath();
	/*
	全路径，形式如下: http://127.0.0.1:8001/rbac/
	request.getScheme()      ——> http 获取协议
	request.getServerName()  --> 127.0.0.1 获取服务名
	request.getServerPort()  --> 8001 获取端口号
	path                     --> /rbac 获取访问的路径 路
	*/
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%-- 
	<base/>标签解决路径问题
	参考文章:http://www.cnblogs.com/muqianying/archive/2012/03/16/2400280.html
--%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Amaze UI Admin index Examples</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
	href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<link rel="stylesheet" href="assets/css/admin.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="artDialog/lib/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="artDialog/css/ui-dialog.css">
<script src="artDialog/dist/dialog-plus.js"></script>
<script type="text/javascript">
//分配角色
function mdiMenu(role_id) {
    var addDialog = top.dialog({
        title: '分配权限',
        url:'role/mdiMenu?role_id='+role_id,
        onclose:function (){
            window.location.reload();
        }
    });
    addDialog.showModal();
}
function f(){
	var a=document.getElementById("message");
    if($("#msg").val()!=""){
		a.style.display="block";
		$("#msg").val("");
	}else{
		a.style.display="none";
	}
}
function del(k){
    var a=document.getElementById("delRole");
    if(k==0){
    	$("#delForm").submit();
    }
    else if(k!=1){
        a.style.display="block";
        $("#delId").val(k);
    }else{
        a.style.display="none";
        $("#delId").val("");
    }
}
function add(k){
    var a=document.getElementById("addRole");
    if(k==0){
    	a.style.display="block";      
    }
    else if(k==1){
    	a.style.display="none";
    }else if(k==2){  
    	if($("#addRole_name").val().trim().length==0){
    		$("#m1").css("font-weight", "blod").css("color", "red");
            $("#m1").html("角色名称不能为空！");
    	}else{
    		$("#addForm").submit();	
    	}
        
    }
}
function sub(){
	$("#searchForm").submit();
}
</script>
</head>

<body data-type="generalComponents" onload="f()">
<body data-type="index" style="background-color: #e9ecf3;">


	<header class="am-topbar am-topbar-inverse admin-header">
		<div class="am-topbar-brand"></div>
		<div
			class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">
		</div>

		<button
			class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
			data-am-collapse="{target: '#topbar-collapse'}">
			<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
		</button>

		<div class="am-collapse am-topbar-collapse" id="topbar-collapse">

			<ul
				class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
				<li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
					<a class="am-dropdown-toggle tpl-header-list-link"
					href="javascript:;"> <span class="am-icon-bell-o"></span> 提醒 <span
						class="am-badge tpl-badge-success am-round">0</span></span>
				</a>
					<ul class="am-dropdown-content tpl-dropdown-content">
						<li class="tpl-dropdown-content-external">
							<h3>
								你有 <span class="tpl-color-success">5</span> 条提醒
							</h3> <a href="###">全部</a>
						</li>
						<li class="tpl-dropdown-list-bdbc"><a href="#"
							class="tpl-dropdown-list-fl"><span
								class="am-icon-btn am-icon-plus tpl-dropdown-ico-btn-size tpl-badge-success"></span>
								【预览模块】移动端 查看时 手机、电脑框隐藏。</a> <span class="tpl-dropdown-list-fr">3小时前</span>
						</li>
						<li class="tpl-dropdown-list-bdbc"><a href="#"
							class="tpl-dropdown-list-fl"><span
								class="am-icon-btn am-icon-check tpl-dropdown-ico-btn-size tpl-badge-danger"></span>
								移动端，导航条下边距处理</a> <span class="tpl-dropdown-list-fr">15分钟前</span></li>
						<li class="tpl-dropdown-list-bdbc"><a href="#"
							class="tpl-dropdown-list-fl"><span
								class="am-icon-btn am-icon-bell-o tpl-dropdown-ico-btn-size tpl-badge-warning"></span>
								追加统计代码</a> <span class="tpl-dropdown-list-fr">2天前</span></li>
					</ul>
				</li>
				<li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
					<a class="am-dropdown-toggle tpl-header-list-link"
					href="javascript:;"> <span class="am-icon-calendar"></span> 进度
						<span class="am-badge tpl-badge-primary am-round">0</span></span>
				</a>
					<ul class="am-dropdown-content tpl-dropdown-content">
						<li class="tpl-dropdown-content-external">
							<h3>
								你有 <span class="tpl-color-primary">4</span> 个任务进度
							</h3> <a href="###">全部</a>
						</li>
						<li><a href="javascript:;"
							class="tpl-dropdown-content-progress"> <span class="task">
									<span class="desc">Amaze UI 用户中心 v1.2 </span> <span
									class="percent">45%</span>
							</span> <span class="progress">
									<div class="am-progress tpl-progress am-progress-striped">
										<div class="am-progress-bar am-progress-bar-success"
											style="width: 45%"></div>
									</div>
							</span>
						</a></li>
						<li><a href="javascript:;"
							class="tpl-dropdown-content-progress"> <span class="task">
									<span class="desc">新闻内容页 </span> <span class="percent">30%</span>
							</span> <span class="progress">
									<div class="am-progress tpl-progress am-progress-striped">
										<div class="am-progress-bar am-progress-bar-secondary"
											style="width: 30%"></div>
									</div>
							</span>
						</a></li>
						<li><a href="javascript:;"
							class="tpl-dropdown-content-progress"> <span class="task">
									<span class="desc">管理中心 </span> <span class="percent">60%</span>
							</span> <span class="progress">
									<div class="am-progress tpl-progress am-progress-striped">
										<div class="am-progress-bar am-progress-bar-warning"
											style="width: 60%"></div>
									</div>
							</span>
						</a></li>

					</ul>
				</li>
				<li class="am-hide-sm-only"><a href="javascript:;"
					id="admin-fullscreen" class="tpl-header-list-link"><span
						class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
			</ul>
		</div>
	</header>







	<div class="tpl-page-container tpl-page-header-fixed">

		<jsp:include page="../jsp/nav.jsp" />





		<div class="tpl-content-wrapper">

			<div class="tpl-portlet-components">
				<div class="portlet-title">
					<div class="caption font-green bold">角色列表</div>


				</div>
				<div class="tpl-block">
					<div class="am-g">
						<div class="am-u-sm-12 am-u-md-6">
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<button type="button" onclick="add(0)"
										class="am-btn am-btn-default am-btn-success">
										<span class="am-icon-plus"></span> 新增
									</button>
								</div>
							</div>
						</div>
<form method="post" action="user/listRole" id="searchForm">
						<div class="am-u-sm-12 am-u-md-3">
							<div class="am-input-group am-input-group-sm">
							
								<input type="text" name="role_name" class="am-form-field"> <span
									class="am-input-group-btn">
									<button
										class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search"
										type="button" onclick="sub()"></button>
								</span>
							</div>
						</div></form>
					</div>
					<div class="am-g">
						<div class="tpl-table-images">
							<c:forEach items="${roleList }" var="role">
								<div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
									<div class="tpl-table-images-content">
										<a href="javascript:;" class="tpl-table-images-content-i">
											<span class="tpl-table-images-content-i-shadow"></span> <img
											src="assets/img/1.jpg" alt="">
										</a>
										<div class="tpl-table-images-content-block">
											<div class="tpl-i-font">${role.role_name }</div>
											<div class="am-btn-toolbar">
												<div
													class="am-btn-group am-btn-group-xs tpl-edit-content-btn">
													<button type="button" onclick="mdiMenu(${role.role_id})"
														class="am-btn am-btn-default am-btn-secondary">
														<span class="am-icon-edit"></span> 编辑
													</button>
													<button type="button" onclick="del(${role.role_id})"
														class="am-btn am-btn-default am-btn-danger">
														<span class="am-icon-trash-o"></span> 删除
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div class="am-u-lg-12">
							<jsp:include page="../jsp/pages.jsp" />
						</div>

					</div>

				</div>
			</div>
			<div class="tpl-alert"></div>
		</div>










	</div>
	<div id="delRole" class="am-form-group"
		style="display: none; z-index: 100; position: absolute; left: 50%; top: 50%; height: 100px; width: 240px; background-color: #ffffff; border: solid 1px #010407">
		<div class="am-u-sm-9 am-u-sm-push-3"
			style="margin-top: 30px; padding: 0;">			
			<button type="button" class="am-btn am-btn-primary" onclick="del(0)">确认</button>		
			<button type="button" class="am-btn am-btn-primary" onclick="del(1)">取消</button>
		</div>
		<form action="role/delRole" method="post" id="delForm">
		  <input type="hidden" value="" id="delId" name="role_id">
		  <input type="hidden" name="p1" value="${pages }">
		</form>
	</div>
	<div id="message" class="am-form-group"
        style="display: none; z-index: 100; position: absolute; left: 50%; top: 50%; height: 100px; width: 240px; background-color: #ffffff; border: solid 1px #010407">
        <div class="am-u-sm-9 am-u-sm-push-3"
            style="margin-top: 30px; padding: 0;">  
            <input type="hidden" value="${message }" id="msg" >        
            ${message }
            <button type="button" class="am-btn am-btn-primary" onclick="f()">确认</button>        
        </div>
    </div>
    <div id="addRole" class="am-form-group"
        style="display: none; z-index: 100; position: absolute; left: 50%; top: 50%; height: 200px; width: 340px; background-color: #ffffff; border: solid 1px #010407">
        <div class="am-u-sm-9 am-u-sm-push-3"
            style="margin-top: 30px; padding: 0;">
            <form action="role/addRole" id="addForm" method="post">  
            角色名：<input type="text" value="" name="role_name" id="addRole_name"> <font id="m1"></font>       
            </form>
            <button type="button" class="am-btn am-btn-primary" onclick="add(2)">确认添加</button>
            <button type="button" class="am-btn am-btn-primary" onclick="add(1)">取消</button>        
        </div>
    </div>
	</div>

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/app.js"></script>

</body>

</html>